"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import ProjectFlowGraph from "@/components/ProjectFlowGraph"
import FlowOperation from "@/components/FlowOperation"

// 模拟历史数据
const mockHistories = [
  {
    id: "1",
    action: "STATUS_CHANGED",
    description: "项目立项申请提交，准备进入董事长审核流程",
    fromLevel1: "草稿",
    toLevel1: "待立项",
    createdAt: "2024-01-15T09:30:00Z",
    user: { name: "张三" }
  },
  {
    id: "2",
    action: "STATUS_CHANGED", 
    description: "董事长审核通过，项目正式立项，开始分配研发任务",
    fromLevel1: "待立项",
    toLevel1: "已立项",
    createdAt: "2024-01-20T14:20:00Z",
    user: { name: "李四" }
  },
  {
    id: "3",
    action: "STATUS_CHANGED",
    description: "研发经理完成任务分配，硬件工程师开始原理图设计",
    fromLevel1: "已立项", 
    toLevel1: "设计中",
    createdAt: "2024-01-25T10:15:00Z",
    user: { name: "王五" }
  }
]

export default function TestGraphPage() {
  const [currentStatus, setCurrentStatus] = useState("设计中")
  
  const handleFlowSubmit = async (data: any) => {
    console.log("Flow operation submitted:", data)
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新状态
    const statusMap: Record<string, string> = {
      'design_to_development': '开发中',
      'design_dormancy': '休眠'
    }
    
    const newStatus = statusMap[data.transitionId]
    if (newStatus) {
      setCurrentStatus(newStatus)
      
      // 添加新的历史记录
      mockHistories.push({
        id: Date.now().toString(),
        action: "STATUS_CHANGED",
        description: data.description || `状态流转：${data.transitionId}`,
        fromLevel1: currentStatus,
        toLevel1: newStatus,
        createdAt: new Date().toISOString(),
        user: { name: "当前用户" }
      })
    }
  }

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">项目状态流转图谱测试</h1>
        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-500">当前状态:</span>
          <span className="px-3 py-1 bg-blue-500 text-white rounded-full text-sm">
            {currentStatus}
          </span>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 图谱展示 */}
        <Card>
          <CardHeader>
            <CardTitle>项目状态流转时间线</CardTitle>
          </CardHeader>
          <CardContent>
            <ProjectFlowGraph 
              projectId="test-project"
              currentStatus={currentStatus}
              histories={mockHistories}
            />
          </CardContent>
        </Card>

        {/* 流转操作 */}
        <Card>
          <CardHeader>
            <CardTitle>状态流转操作</CardTitle>
          </CardHeader>
          <CardContent>
            <FlowOperation 
              projectId="test-project"
              currentStatus={currentStatus}
              onFlowSubmit={handleFlowSubmit}
            />
          </CardContent>
        </Card>
      </div>

      {/* 功能说明 */}
      <Card>
        <CardHeader>
          <CardTitle>功能说明</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4 text-sm text-gray-600">
            <div>
              <h4 className="font-medium text-gray-800 mb-2">🎯 核心功能</h4>
              <ul className="list-disc list-inside space-y-1">
                <li>状态流转操作支持描述字段输入</li>
                <li>描述信息作为图谱节点的主要显示内容</li>
                <li>时间线视图展示完整的状态流转历史</li>
                <li>当前状态以蓝色背景卡片突出显示</li>
              </ul>
            </div>
            
            <div>
              <h4 className="font-medium text-gray-800 mb-2">📋 操作说明</h4>
              <ul className="list-disc list-inside space-y-1">
                <li>在右侧选择流转事件和目标状态</li>
                <li>填写节点描述信息（将显示在图谱中）</li>
                <li>可上传相关附件（如需要）</li>
                <li>提交后左侧图谱将更新显示新的流转记录</li>
              </ul>
            </div>
            
            <div>
              <h4 className="font-medium text-gray-800 mb-2">🔧 技术实现</h4>
              <ul className="list-disc list-inside space-y-1">
                <li>使用 FlowOperation 组件处理流转操作</li>
                <li>使用 ProjectFlowGraph 组件展示时间线</li>
                <li>API 支持描述字段存储和历史记录</li>
                <li>响应式设计，支持移动端访问</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}